<html>

<head>
    <script>
        function onColorChanged(event) {
            var kvlist = [];
            for (var key in event) {
                kvlist.push(key + ":" + event[key])
            }
            alert(kvlist.join('\n'));

            document.getElementById("main").style.backgroundColor = event["color"];
        }

        function onLoad() {
            if (typeof (CallBridge) == 'undefined') {
                return;
            }

            CallBridge.addEventListener("colorChange", function (event) {
                var kvlist = [];
                for (var key in event) {
                    kvlist.push(key + ":" + event[key])
                }
                //alert(kvlist.join('\n'));

                document.getElementById("main").style.backgroundColor = event["color"];
            })
        }

        function onDragAreaMouseDown() {
            CallBridge.invokeMethod("onDragAreaMouseDown");
        }

        function onInvokeMethodClicked() {
            CallBridge.invokeMethod("TestMethod", 1, false, "arg3");
        }

        function onCallBridgeQueryClicked() {
            var query = {
                request: document.getElementById("message").value,
                onSuccess: function (response) {
                    alert(response);
                },
                onFailure: function (error_code, error_message) {
                    alert(error_message);
                }
            }
            window.CefViewQuery(query);
        }


        /**
         * getFuntionName()
         * @param {Function} func
         * @return {String}
         */
        function getFunctionName(func) {
            if (typeof func == 'function' || typeof func == 'object') {
                var name = ('' + func).match(/function\s*([\w\$]*)\s*\(/);
            }
            return name && name[1];
        }
        /**
         * trace
         * @param [int] [count=10]
         * @return {String}
         */
        trace = function () {
            var stack = [],
                caller = arguments.callee.caller;

            while (caller) {
                stack.unshift(getFunctionName(caller));
                caller = caller && caller.caller;
            }
            return 'functions on stack:' + '\n' + stack.join('\n');
        }

        function OpenPopup() {
            var popup = window.open("", "PopupWindow", "width=800, height=600");
            popup.document.write("<p>This is popup window.</p>");
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .noselect {
            user-select: none;
            /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
        }
    </style>
</head>

<body onload="onLoad()" id="main" class="noselect">
    <h1 align="center" style="font-size:12pt; font-family:MS Shell Dlg 2;">Web Area</h1>
    <div id="firstVue">
        <input type="number" v-model.number="my_step" />
        <button v-on:click="clickButton">Add</button>
        <p>{{my_total}}</p>
    </div>
    <div align="center">
        <div style="background-color:green; -webkit-app-region:drag;" onmousedown="onDragAreaMouseDown()">
            <h1>Dragging area</h1>
        </div>
        <br />

        <label> Test Case for InvokeMethod </label>
        <br />
        <input type="button" value="Invoke Method" onclick="onInvokeMethodClicked()" />
        <br />
        <br />

        <label> Test Case for QCefQuery </label>
        <br />
        <textarea id="message"
            style="width:320px; height:120px;">this message will be processed by native code.</textarea>
        <br />
        <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
        <br />
        <br />
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: '#firstVue',
        data: {
            my_step: 1,
            my_total: 0
        },
        methods: {
            clickButton: function () {
                this.my_total = this.my_total + this.my_step
            }
        }
    })
</script>

</html>